import React from 'react';
import MainUI from '../../components/layout/MainUI';
import  AddResourceModalUI from '../../components/system/resources/AddResourceModalUI';
import  EditResourceModalUI from '../../components/system/resources/EditResourceModalUI';
import {connect} from 'dva';
import {Breadcrumb, Table, Button, Row, Col, Icon, Modal, notification,message,Popconfirm} from 'antd';

class ResourceManager extends React.Component {
  state = {
    columns: [
      {
        title: '图标', dataIndex: 'icon',render: (text, row, index) => (
        <Icon type={text}/>
      )
      },
      {title: '名称', dataIndex: 'text'},
      {title: '资源值', dataIndex: 'urlOrPermission'},
      {
        title: '类型', dataIndex: 'menuType', render: (text, row, index) => {
        return text == "dir" ? "文件夹" : text == "element" ? "功能" : text == "page" ? "页面" : "未知";
      }
      },
    ],
    addModalChanged: false,
    editModalChanged: false,
    parentComp:{},
    editRow:{},
  };
  search = () => {
    this.props.dispatch({
      type: 'resourceManager/getAllResources'
    });
  };
  deleteResource=()=>{
    const selectRows = this.props.selectRows;
    if (null == selectRows || selectRows.length == 0) {
      message.warning('请选择需要删除的数据！');
      return;
    }else{
      //check it is exsit a chilren
      const ids=new Array();
      for(const r of selectRows){
        ids.push(r.id);
        if(r.hasChildren){
          message.error(r.text+'含有子资源,删除失败！');
          return;
        }
      }
      this.props.dispatch({
          type:'resourceManager/deleteResources',
          payload:{ids:ids}
      });
      this.props.dispatch({
        type:'resourceManager/updateSelectRow',
        payload:[]
      });
    }
  };
  showModal = (opt) => {
    if(opt==='add'){
      const selectRows = this.props.selectRows;
      if (null != selectRows && selectRows.length !=0) {
        if(selectRows.length == 1){
          const row=selectRows[0];
          if(row.menuType==='dir'){
            this.state.parentComp=row;
          }else{
            message.warning('只有文件夹类型的资源能添加子资源!');
            return;
          }
        }else{
          message.warning('只能选择一条记录进行操作!');
          return;
        }
      }else{
        this.state.parentComp={id:-1,text:'root'};
      }
      this.state.addModalChanged = !this.state.addModalChanged;
    }else if(opt==='edit'){
      const selectRows = this.props.selectRows;
      if (null == selectRows || selectRows.length != 1) {
        message.warning('请选择一条数据！');
        return;
      }
      const row=selectRows[0];
      this.state.editRow=row;
      this.state.editModalChanged = !this.state.editModalChanged;
    }
    this.setState(this.state);
  };

  rowSelection = () => {
    return {
      onSelect: (record, selected, selectedRows) => {
        this.props.dispatch({
          type:'resourceManager/updateSelectRow',
          payload:selectedRows
        });
      },
    }
  };

  render() {

    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item>资源管理</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Row>
            <Col span={24} style={{textAlign: 'right'}}>
              <Button type="primary" icon="retweet" onClick={this.search}>刷新</Button>
            </Col>
          </Row>
          <Row>
            <Col span={4}>
              <Button  type='primary' onClick={()=>{this.showModal('add')}}>新增</Button>
              <span className="ant-divider"/>
              <Button  onClick={() => {this.showModal('edit')}}>编辑</Button>
              <span className="ant-divider"/>
              <Popconfirm title="你确定要进行删除操作?" onConfirm={this.deleteResource}  okText="是" cancelText="否">
                <Button  type='danger' >删除</Button>
              </Popconfirm>

            </Col>
          </Row>

          <Table rowSelection={this.rowSelection()} rowKey='id' style={{marginTop: '10px'}}
                 columns={this.state.columns}
                 dataSource={this.props.resources} pagination={false}/>

          {
            <AddResourceModalUI addModalChanged={this.state.addModalChanged} parentComp={this.state.parentComp} />
          }
          {
            <EditResourceModalUI editModalChanged={this.state.editModalChanged} editRow={this.state.editRow}/>
          }

        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    resources: state.resourceManager.resources,
    selectRows:state.resourceManager.selectRows,
  }
}

export default connect(mapStateToProps)(ResourceManager);
